<template>
  <Card style="height:900px">
    <span style="font-weight: bold;font-size:20px">利率</span>
    <Form ref="formInline" :model="formDatas" :rules="ruleInline" inline>
      <Card>
        <Row>
          <Col span="6" order="1" class="row-col-style3">机构</Col>
          <Col span="5" order="2" class="row-col-style2">
          <FormItem>
            <Select v-model="formDatas.organization" v-if="type==1||type==0" style="width: 300px;">
              <Option v-for="item in orgList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span v-text="getOptionValue(orgList,formDatas.organization)" v-if="type==2"></span>
          </FormItem>
          </Col>
          <Col span="5" order="3" class="row-col-style3">描述</Col>
          <Col span="5" order="4" class="row-col-style2">
          <FormItem prop="description">
            <Input v-model="formDatas.description" v-if="type==1||type==0" style="width: 300px;" placeholder="请输入"></Input>
            <span v-text="formDatas.description" v-if="type==2"></span>
          </FormItem>
          </Col>
        </Row>
        </br>
        <Row>
          <Col span="6" class="row-col-style3">固定利率</Col>
          <Col span="5" class="row-col-style2">
          <FormItem prop="rate">
            <Input v-model="formDatas.rate" v-if="type==1||type==0" style="width: 300px;" placeholder="请输入"></Input>
            <span v-text="formDatas.rate" v-if="type==2"></span>%
          </FormItem>
          </Col>
          <Col span="5" class="row-col-style3">基本费用</Col>
          <Col span="5" class="row-col-style2">
          <FormItem prop="baseFee">
            <Input v-model="formDatas.baseFee" v-if="type==1||type==0" style="width: 300px;" placeholder="请输入"></Input>
            <span v-text="formDatas.baseFee" v-if="type==2"></span>
          </FormItem>
          </Col>
        </Row>
        </br>
        <Row>
          <Col span="6" class="row-col-style3">利率计算基准</Col>
          <Col span="5" class="row-col-style2">
          <FormItem>
            <Select v-model="formDatas.yearBase" v-if="type==1||type==0" style="width: 300px;">
              <Option v-for="item in yearBaseData" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span v-text="getOptionValue(yearBaseData,formDatas.yearBase)" v-if="type==2"></span>
          </FormItem>
          </Col>
        </Row>
      </Card>
      </br>
      <span style="margin-top:20px;font-weight: bold;font-size:20px">更新信息</span>
      <Card>
        <Row type="flex">
          <Col span="8" order="1" class="row-col-style">最后更新时间</Col>
          <Col span="3" order="2" class="row-col-style2">{{formDatas.updatedDate?this.$util.loanModularFormatTime(formDatas.updatedDate):this.$util.loanModularFormatTime(new Date())}}</Col>
          <Col span="5" order="3" class="row-col-style">最后更新人员</Col>
          <Col span="3" order="4" class="row-col-style2">{{formDatas.updatedBy}}</Col>
        </Row>
        </br>
        <Row type="flex">
          <Col span="8" order="1" class="row-col-style">审核时间</Col>
          <Col span="3" order="2" class="row-col-style2">{{formDatas.checkTime?this.$util.loanModularFormatTime(formDatas.checkTime):''}}</Col>
          <Col span="5" order="3" class="row-col-style">审核人员</Col>
          <Col span="3" order="4" class="row-col-style2">{{formDatas.checkUid}}</Col>
        </Row>
        </br>
        <Row type="flex">
          <Col span="8" order="1" class="row-col-style">审核意见</Col>
          <Col span="3" order="2" class="row-col-style2">{{formDatas.checkDesc}}</Col>
        </Row>
        </br>
        <Row v-if="type==1||type==0" style="text-align: center">
          <Button type="primary" @click="saveOrUpdate()">确定</Button>
          <Button type="primary" @click=resetForm>重置</Button>
          <Button type="primary" @click="handleGoBack">返回</Button>
        </Row>
        <Row v-else style="text-align: center">
          <Button type="primary" v-show="formDatas.status == 9" @click="changeTypeToEdit()">编辑</Button>
          <Button type="primary" @click="deleteBykey">删除</Button>
          <Button type="primary" @click="handleGoBack">返回</Button>
        </Row>
      </Card>
    </Form>

  </Card>
</template>
<script>
const validateRate = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的固定利率'))
  } else {
    callback()
  }
}
const validateBaseFee = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的基本费用'))
  } else {
    callback()
  }
}
export default {
  data () {
    return {
      $ajax: null,

      formDatas: {
        rateId: null,
        organization: '100',
        description: null,
        rate: null,
        baseFee: null,
        yearBase: 360,
        status: null
      },
      defaultFormData: {},
      ruleInline: {
        rate: [{
          validator: validateRate,
          trigger: 'blur'
        }],
        baseFee: [{
          validator: validateBaseFee,
          trigger: 'blur'
        }],
        description: [{
          required: true,
          message: '描述不能为空',
          trigger: 'blur'
        }]
      }, // 校验规则

      yearBaseData: [{
        value: 360,
        label: '360'
      }, {
        value: 365,
        label: '365'
      }, {
        value: 366,
        label: '366(365)'
      }],

      orgList: [{
        value: '100',
        label: '消费金融'
      }],
      type: 0 // 1 编辑   0 新增     2 查看
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initPage()
  },
  computed: {
    index () {
      return this.$route.query.index
    }
  },
  mounted () {

  },
  methods: {

    // 返回上一页
    handleGoBack () {
      this.$router.back()
    },

    handleRouterGo (path) {
      this.$router.push(path)
    },

    // 通用获取下拉框的文本信息
    getOptionValue (optionArray, keyValue) {
      for (var i = 0; i < optionArray.length; i++) {
        if (optionArray[i].value === keyValue) {
          return optionArray[i].label
        }
      }
      return ''
    },

    initPage () {
      var type = this.$route.query.type
      this.type = type
      if (type === 1 || type === 2) {
        const vm = this
        vm.$ajax.get(vm.$appContext.marvels_core_product + '/product/param/rate/service/getKey/' + vm.index).then(re => {
          var data = re.data
          vm.formDatas = data.data
          this.defaultFormData = JSON.parse(JSON.stringify(vm.formDatas))
        }).catch(er => {

        })
      }
    },

    saveOrUpdate () {
      const vm = this
      this.$refs.formInline.validate(valid => {
        if (valid) {
          if (vm.type === 0) {
            // 保存
            var params = vm.formDatas
            this.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/rate/service/save', params).then(re => {
              var data = re.data
              var code = data.code
              var message = data.message
              if (code !== 'success') {
                this.$Message.warning(message)
                return
              }
              this.$Message.success('添加成功')
              // 返回列表页
              vm.$router.push({
                name: 'rate'
              })
            }).catch(er => {

            })
          } else {
            // 更新
            this.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/rate/service/update', params).then(re => {
              var data = re.data
              var code = data.code
              var message = data.message
              if (code !== 'success') {
                this.$Message.warning(message)
                return
              }
              alert('更新成功')
              // 返回列表页
              vm.$router.push({
                name: 'rate'
              })
            }).catch(er => {
            })
          }
        }
      })
    },

    changeTypeToEdit () {
      this.type = 1
    },
    deleteBykey () {
      this.$Modal.confirm({
        title: '利率审核',

        content: '确定删除?',

        okText: '确定',

        cancelText: '取消',
        onOk: () => {
          var param = {
            rateId: this.$route.query.index
          }
          this.$ajax.post(this.$appContext.marvels_core_product + '/product/param/rate/service/delete', param).then(re => {
            var data = re.data
            var code = data.code
            var message = data.message
            if (code === 'success') {
              this.$Message.success(message)
            } else {
              this.$Message.warn(data.data)
            }
            // 返回列表页
            this.$router.push({
              name: 'rate'
            })
          }).catch(er => {
          })
        }
      })
    },
    resetForm () {
      this.formDatas = JSON.parse(JSON.stringify(this.defaultFormData))
    }

  },
  props: {},
  watch: {
    $route (val) { }
  }
}
</script>

<style lang="less">
@import '../../../styles/common.less';
@import '../../../styles/table.less';
.row-col-style {
  color: #2d8cf0;
  font-family: 微软雅黑;
  font-size: 20px;
  text-align: right;
}
.row-col-style3 {
  font-family: 微软雅黑;
  font-size: 20px;
  text-align: right;
}
.row-col-style2 {
  text-align: center;
}
</style>
